<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片总数--layui后台管理模板</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../static/lib/layui-v2.6.3/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../../static/css/images.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form">
    <blockquote class="layui-elem-quote news_search">
        <div class="layui-inline">
            <input type="checkbox" name="selectAll" id="selectAll" lay-filter="selectAll" lay-skin="primary" title="全选">
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-btn-danger batchDel" lay-event="batchDel">批量删除</a>
        </div>
        <div class="layui-inline">
            <div class="layui-form-mid layui-word-aux">　本页所有数据均为静态，刷新后所有操作无效</div>
        </div>
    </blockquote>
    <ul id="Images"></ul>
</form>
<script src="../../static/lib/layui-v2.6.3/layui.js" charset="UTF-8"></script>
<link rel="stylesheet" href="../static/js/images/js" media="all"/>
</body>


<script>

    //=========编辑============
    //添加 var $$ = null;
    var $$ = null;

    layui.use(['flow', "form","layer"], function () {
        console.log("进来没 ==========  flow");
        var flow = layui.flow,
            form = layui.form,
            layer = layui.layer,
            //=========编辑============
            //一定要改成 $ = $$ = layui.jquery;
            $ = $$ = layui.jquery;	//	流加载

        flow.load({ 	//流加载器
            elem: "#Images",	//指定流加载容器
            done: function (page, limit) {	//执行下一页回调
                var lis = [];
                $.ajax({
                    url: "/imgs/showImgLimits",
                    data: {page: page, limit: 10},	//分页显示的条件
                    type: "post",
                    success: function (res) {
                        console.log("进来res========>" + res);
                        layui.each(res.data, function (index, item) {	//layui 遍历函数
                            var layEvent = item.event;

                            console.log("item========>" + item);
                            // console.log("item========>"+item.imgPath);
                            // console.log("item========>"+item.imgName);
                            console.log(item.id + "========id");
                            lis.push('<li>'
                                        //   src="/uploadImg/'+ item.imgPath +' "
                            			+'<img src="'+ item.imgPath +' ">'
                            			+'<div class="operate">'
                            				+'<div class="check">'
                            					+'<input type="checkbox" value="'+item.id+'" name="belle" lay-filter="choose" lay-skin="primary" title="'+item.imgName+'">'
                            				+'</div>'
                            				+'<i class="layui-icon layui-icon-delete img_del" ></i>'
                            			+'</div>'
                            		+'</li>'
                            );

                            //=========编辑============
                            //一定要用下面这个lis.push（）

                            // lis.push(`<li>
							// 			<img src="/uploadImg/${item.imgPath}">
							// 				<div class="operate">
							// 				<div class="check">
							// 					<input type="checkbox" id="id_${item.id}" name="belle" lay-filter="choose" lay-skin="primary" title="${item.imgName}">
							// 				</div>
							// 				<i class="layui-icon layui-icon-delete img_del" onclick="del(${item.id})"></i>
							// 			</div>
							// 		</li>`
                            // );


                        });


                        console.log(res.count + "总页数");
                        limit(lis.join(''), page < res.count);
                        form.render();
                    }
                });
            }
        });

        //删除单个图片
        $("body").on("click",".img_del", function () {

            var _this = $(this);
            layer.confirm("确认删除选中图片？",{icon:3,title:"提示信息"},function () {
                var index = layer.msg("删除中，请稍后",{icon: 6,time:0,shade:0.8});    //获取弹出层索引
                //siblings(): 获取匹配集合中每个元素的同级元素，通过选择器进行筛选
                //find(): 返回被选元素的后代元素
                var delId = _this.siblings().find("input").attr("value");
                //layer.msg("delid=========>"+delId);
                $.ajax({
                    type: "post",
                    url: "/imgs/deleteById",
                    dataType: "json",
                    contentType: "application/json;charset=UTF-8",
                    data: JSON.stringify(delId),       // data:JSON.stringify(delId)  ====> json格式传参
                    //data: {id: delId},  //deleteById(String id)  ==>字符串格式传参
                    success: function (data) {
                        if (data.code == 0) {
                            layer.close(index);
                            layer.msg(data.message, {icon: 6, time: 1000}, function () {
                                //form.render();  //异步只刷新form表单
                                window.location.reload();     //刷新请求
                            });
                        } else {
                            layer.msg(data.message, {icon: 5, time: 1000}, function () {
                                window.location.reload();
                            });
                        }
                    }

                });

            });
           //layer.msg("点击绑定事件");


        });

        //批量删除
        // $(".batchDel").on("click",function () {
        //
        // });

        var aryIds = [];
        //批量删除第二种方式
        $(".batchDel").click(function () {
            //$("#Images li input[type='checkbox']").is(":checked")   //获取页面所有的checkbox对象ul>li中的所有checkbox元素。
            $("input[name='belle']:checked").each(function () {
                aryIds.push($(this).val());
                //console.log(aryIds);

            });
            console.log(aryIds);
            layer.msg(aryIds+"======aryIds");
            $.ajax({
                type: "delete",
                url: "/imgs/deleteBatch",
                data: JSON.stringify(aryIds),   //{id: aryIds}
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                success:function (data) {
                    if (data.code == 0){
                        layer.msg(data.message,{icon: 6,time:500}, function () {
                            window.location.reload();
                        } )
                    }else {
                        if (data.code == 1){
                            layer.msg(data.message,{icon: 5,time:500});
                            window.location.reload();
                        }
                    }
                },
            });

        });

        //全选
        form.on('checkbox(selectAll)',function (data) {
            var childCheckBox = $("#Images li input[type='checkbox']");
             childCheckBox.each( function (index,item) {
                //data.elem
                item.checked = data.elem.checked;
                layer.msg("全选====>" + item.checked);
            });
            form.render('checkbox');
        });

        //通过判断子选项是否全部选中来确定全选框是否选中
        form.on('checkbox(choose)',function (data) {
            var child = $(data.elem).parents("#Images").find('li input[type="checkbox"]');
            var childChecked = $(data.elem).parents("#Images").find('li input[type="checkbox"]:checked');
            //通过判断选中的checkbox个数与checkbox个数是否相同来判断是否全部选中。
            if (child.length == childChecked.length){
                $(":checkbox[id='selectAll']").prop("checked",true);
            }else {
                $(":checkbox[id='selectAll']").prop("checked",false);
            }
            form.render("checkbox");
        })

    });


    // var el = document.getElementById("id_" + id)

    //=========编辑============
    //下面整个 function

    function del(id) {
        console.log(id);
        $$.ajax({
            type: "post",
            url: "/imgs/deleteById",
            dataType: "json",
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify(id),
            success: function (data) {
                if (data.code == 0) {
                    layer.msg(data.message, {icon: 6, time: 1000}, function () {
                        window.location.reload();
                    });
                } else {
                    layer.msg(data.message, {icon: 5, time: 1000}, function () {
                        window.location.reload();
                    });
                }
            }
        });
        console.log("删除成功");
    }


</script>

</html>